<script setup lang="ts">
import { Bug,Data, LayoutThree, Lightning, Share, AllApplication } from '@icon-park/vue-next'
import {computed, defineComponent, h} from "vue"
import {RouterLink, RouterView, useRoute} from 'vue-router'
import {useEditorDebugStore} from "@/stores/debug";
const debugStore = useEditorDebugStore();
const route = useRoute();
const activeLink = computed(() => route.name);
const routes = [
  {
    value: 'dataSource',
    label: '数据源',
    bg: `radial-gradient(50% 50% at 50% 100%, rgba(0, 196, 83, 0.2) 0%, rgba(0, 196, 83, 0) 100%)`,
    color: 'rgb(0, 196, 83)',
    borderColor: 'radial-gradient(50% 50%, rgb(0, 196, 83) 0%, rgba(0, 196, 83, 0) 100%)'
  },
  {
    value: 'layout',
    label: '布局',
    bg: `radial-gradient(50% 50% at 50% 100%, rgba(24, 190, 212, 0.2) 0%, rgba(24, 190, 212, 0) 100%)`,
    color: 'rgb(24, 190, 212)',
    borderColor: 'radial-gradient(50% 50%, rgb(24, 190, 212) 0%, rgba(24, 190, 212, 0) 100%)'
  },
  {
    value: 'actions',
    label: '动作',
    bg: `radial-gradient(50% 50% at 50% 100%, rgba(241, 60, 11, 0.2) 0%, rgba(241, 60, 11, 0) 100%)`,
    color: 'rgb(241, 60, 11)',
    borderColor: 'radial-gradient(50% 50%, rgb(241, 60, 11) 0%, rgba(241, 60, 11, 0) 100%)'
  },
  {
    value: 'bak',
    label: '备份示例',
    bg: `radial-gradient(50% 50% at 50% 100%, rgba(0, 196, 83, 0.2) 0%, rgba(0, 196, 83, 0) 100%)`,
    color: 'rgb(122 0 196)',
    borderColor: 'radial-gradient(50% 50%, rgb(0, 196, 83) 0%, rgba(0, 196, 83, 0) 100%)'
  }
]

const Icon = defineComponent({
  setup(props) {
    // 千万不能这样子写！！！
    // const { type } = props
    switch (props.type) {
      case 'bak':
        return () => h(AllApplication, { size: 16 })
      case 'dataSource':
        return () => h(Data, { size: 16 })
      case 'layout':
        return () => h(LayoutThree, { size: 16 })
      case 'actions':
        return () => h(Lightning, { size: 16 })

      default:
        return () => h('div')
    }
  },
  props: {
    type: {
      type: String,
      required: true
    }
  }
})
</script>

<template>
  <div class="zhtt-nav-wrap">
    <div class="zhtt-sys-title">
      低代码平台
    </div>
    <div class="zhtt-tabs">
      <RouterLink v-for="item in routes" v-bind:key="item.value" :to="'/'+item.value">
        <div class="zhtt-tab"
             :style="{lineHeight: 0.7,color: activeLink?.includes(item.value) ? item.color : 'var(--color-gray-700)'
          }"
        >
          <Icon :type="item.value" :active="activeLink?.includes(item.value)" />
          {{item.label}}
        </div>
      </RouterLink>
    </div>
    <div class="zhtt-setting">
      <div @click="debugStore.toggle()">
        <Bug />
        开发模式:({{debugStore.debug}})
      </div>
    </div>
  </div>
</template>

<style scoped>
.zhtt-nav-wrap{
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  box-shadow: rgb(0 0 0 / 8%) 0 1px 0;
}
.zhtt-sys-title{
  width:100px;
}
.zhtt-tabs {
  flex: 1;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
}
.zhtt-tab{
  padding:8px 12px;
}
.zhtt-active{
  background: pink;
}
.zhtt-setting{
  width: 200px;
  display: flex;
  place-items: center;
  justify-content: flex-end;
  margin-right: 18px;
  gap: 12px;
}
</style>
